<template>
    <view class="page">
        <nav-bar ref="navBar" fontColor="#FFF" bgColor="themeBgColor" type="transparentFixed" title="商品详情"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <!-- 轮播 -->
        <view class="banner_swiper">
            <swiper :autoplay="true" :interval="3000" :duration="1000" @change="onSwiperChange">
                <swiper-item v-for="(item, index) of dataInfo.headImgs" :key="index">
                    <image :src="item" mode="aspectFit" @click="onPreviewImage(item, dataInfo.headImgs)"></image>
                </swiper-item>
            </swiper>
            <view class="swiper_pages">{{swiperIndex + 1}}<text>/</text>{{dataInfo.headImgs.length}}</view>
        </view>
        <!-- 商品信息 -->
        <view class="goods_info_box">
            <view class="price_box">
                <view class="sales_price">
                    <view class="label">积分</view>
                    <view class="price"><text>{{dataInfo.integral}}</text></view>
                </view>
                <view class="goods_title">{{dataInfo.name}}</view>
            </view>
           <!-- <view class="share">
                <text></text>
                <view>分享</view>
            </view> -->
        </view>
        <view class="cell_list line lineTop">
            <view class="cell_left">运费：{{dataInfo.pricePostage}}</view>
            <view class="cell_right">{{dataInfo.numSales}}人购买</view>
        </view>
        <view class="cell_list active" @click="specificationPopupChange(1000)">
            <view class="cell_left">选择</view>
            <view class="cell_right arrow black" v-if="selectSpecData.objId">{{selectSpecData.name}} x{{goodsNum}}</view>
            <view class="cell_right arrow black" v-else>规格类型</view>
        </view>
        <view class="cell_list">
            <view class="cell_left">发货地</view>
            <view class="cell_right">{{dataInfo.sendLocal}}</view>
        </view>
        <!-- 商品详情 -->
        <view class="goods_details_box">
            <view class="content" v-if="dataInfo.introduceContent && dataInfo.introduceContent.length > 0">
                <view v-for="(item,index) in dataInfo.introduceContent" :key="index">
                    {{item}}
                </view>
            </view>
            <image v-for="(item,index) of dataInfo.introduceImgs" :key="index" :src="item" mode="widthFix"></image>
        </view>
        <view class="interval"></view>
        <!-- 按钮 -->
        <view class="buy_btn_box">
            <view class="price">
                合计积分：<text>{{ selectSpecData.integral || dataInfo.integral }}</text>
            </view>
            <button @click="onBuy">立即兑换</button>
        </view>
        <!-- <view class="short_sale" v-else>
			藏品已售空
		</view> -->
        <!-- 规格选择 -->
        <z-popup v-model="specificationPopupShow " @on-hide="specificationPopupChange(0)">
            <view class="specification_popup_box">
                <view class="close" @click="specificationPopupChange(0)"></view>
                <view class="goods_info">
                    <image v-if="dataInfo.headImgs" :src="dataInfo.headImgs[0]" mode="aspectFill"></image>
                    <view class="info">
                        <view class="price"><text>{{ selectSpecData.integral || dataInfo.integral }}积分</text></view>
                        <view class="stock" v-if="selectSpecData.objId">库存{{ selectSpecData.numTotal }}件</view>
                        <view class="specification_text" v-if="selectSpecData.objId">选择规格 ”{{selectSpecData.name}}“</view>
                        <view class="specification_text" v-else>选择 规格 数量</view>
                    </view>
                </view>
                <scroll-view scroll-y="true">
                    <view class="scroll_content">
                        <view class="specification_title">规格</view>
                        <view class="specification_select_box">
                            <text :class="{ active: selectSpecData.objId == item.objId }" v-for="(item, index) of dataInfo.goodsSpecBO"
                                :key="index" @click="onSelectSpecification(item)">{{ item.name }}</text>
                        </view>
                        <view class="select_num_box">
                            <view class="name">购买数量</view>
                            <view class="num_box">
                                <button :class="{active:goodsNum > 1}" @click="onReduce">-</button>
                                <text>{{goodsNum}}</text>
                                <button :class="{active:goodsNum < selectSpecData.numTotal}" @click="onPlus">+</button>
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <view class="form_but">
                    <button v-if="selectSpecData.objId && selectSpecData.numTotal >= 1" class="active" @click="onConfirm">确定</button>
                    <button v-else-if="selectSpecData.objId">该规格库存不足</button>
                    <button v-else>确定</button>
                </view>
            </view>
        </z-popup>
    </view>
</template>
<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';
    // #ifdef H5
    //微信SDK
    import {
        setShare
    } from '@/plugins/wxJsSDK';
    // #endif
    import zPopup from '@/components/common/popup';
    export default {
        components: {
            zPopup
        },
        name: 'goodsDetail',
        data() {
            return {
                dataInfo: {
                    "name": "",
                    "pricePostage": 0,
                    "pricePostageStr": "¥0",
                    "numSales": 0,
                    "headImgs": [],
                    "introduceContent": "",
                    "introduceImgs": [],
                    "sendLocal": "深圳",
                    "goodsSpecBO": [],
                    "specName": "",
                    "integral": 0.0,
                    "numTotal": 0
                },
                swiperIndex: 0,
                // 当前的藏品Id
                objId: '',
                // 判断是规格选择 :
                // 选择 : 1000
                // 加入购物车 : 2000 
                // 立即购买 : 3000
                specificationPopupState: 0,
                specificationPopupShow: false,
                // 规格
                selectSpecData: {},
                // 选择的数量
                goodsNum: 1,
            };
        },
        //第一次加载
        onLoad(e) {
            this.objId = e.objId;
            this.pageData();
        },
        computed: {
            priceTotal() {
                return parseFloat(this.dataInfo.price * this.goodsNum)
            }
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            ...mapMutations(['setPreOrderData']),
            // 规格弹出变化
            specificationPopupChange(val) {
                this.specificationPopupState = val;
                if (val == 1000 || val == 2000 || val == 3000) {
                    this.specificationPopupShow = true;
                } else {
                    this.specificationPopupShow = false;
                }
            },
            // 选择规格
            onSelectSpecification(item) {
                this.selectSpecData = item;
            },
            // 轮播图变化
            onSwiperChange(e) {
                this.swiperIndex = e.detail.current;
            },
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            // 立即购买
            onBuy() {
                this.judgeLogin(() => {
                    if (this.selectSpecData.objId) {
                        uni.navigateTo({
                            url: '/pages/integral/confirmOrder?objId=' + this.dataInfo.objId +
                                "&goodsNum=" + this.goodsNum +
                                "&goodsSpecId=" + this.selectSpecData.objId
                        });
                    } else {
                        if (this.specificationPopupState == 3000) {
                            uni.showToast({
                                title: "请选择规格",
                                icon: "none"
                            });
                        } else {
                            this.specificationPopupChange(3000);
                        }
                    }
                });
            },
            // 确定
            onConfirm() {
                if (this.specificationPopupState == 2000) {
                    this.onAddShopCar();
                } else if (this.specificationPopupState == 3000) {
                    this.onBuy();
                } else {
                    this.specificationPopupChange(0);
                }
            },
            // 减法
            onReduce() {
                if (this.goodsNum > 1) {
                    this.goodsNum -= 1;
                }
            },
            // 增加数量
            onPlus() {
                if (this.selectSpecData.objId) {
                    if (this.goodsNum < this.selectSpecData.numTotal) {
                        this.goodsNum += 1;
                    }
                } else {
                    uni.showToast({
                        title: '请选择规格',
                        icon: 'none'
                    });
                }
            },
            pageData() {
                this.$http
                    .get('api/shop_integral/v1/info', {
                        objId: this.objId
                    })
                    .then(res => {
                        if (res.introduceContent) {
                            res.introduceContent = res.introduceContent.split(/\n/);
                        }
                        this.dataInfo = res;
                    });
            },
            // 图片预览的方法
            onPreviewImage(currentUrl, ulsList) {
                uni.previewImage({
                    current: currentUrl,
                    urls: ulsList,
                    loop: true,
                    indicator: 'default'
                });
            },
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        onPageScroll(e) {
            this.$refs.navBar.pageScroll(e);
        },
        //页面下拉刷新
        onPullDownRefresh() {},
        //页面上拉触底
        onReachBottom() {},
        //用户点击分享
        onShareAppMessage(e) {
            return {
                title: this.dataInfo.name, // 分享标题
                imgUrl: this.dataInfo.headImgs[0]
            };
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .banner_swiper {
        position: relative;

        swiper {
            height: 100vw;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .swiper_pages {
            position: absolute;
            bottom: 30rpx;
            right: 30rpx;
            height: 40rpx;
            background-color: rgba(0, 0, 0, 0.5);
            line-height: 40rpx;
            border-radius: 20rpx;
            color: #FFF;
            font-size: 24rpx;
            padding: 0 20rpx;

            text {
                margin: 0 6rpx;
            }
        }
    }

    .goods_info_box {
        background-color: #FFF;
        padding: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price_box {
            .sales_price {
                display: flex;
                align-items: center;

                .label {
                   height: 42rpx;
                   	background-color: #ffeceb;
                   	border-radius: 4rpx;
                    line-height: 42rpx;
                    padding: 0 10rpx;
                    font-size: 24rpx;
                    color: #dc1e32;
                    margin-right: 20rpx;
                }

                .price {
                    font-size: 24rpx;
                    color: #ff3d3d;
                    font-weight: bold;

                    text {
                        font-size: 44rpx;
                    }
                }
            }

            .goods_title {
                background-color: #FFF;
                font-size: 30rpx;
                margin-top: 20rpx;
                line-height: 42rpx;
                color: #333333;
                font-weight: bold;
            }
        }

        .share {
            display: flex;
            flex-direction: column;
            align-items: center;

            text {
                @include bis('../../static/icon/ic_share_black.png');
                width: 40rpx;
                height: 38rpx;
            }

            view {
                font-size: 24rpx;
                color: #333435;
                margin-top: 12rpx;
            }
        }
    }

    .cell_list {

        .cell_left,
        .cell_right {
            font-size: 28rpx;
            color: #999999;

            &.black {
                color: #333333;
            }
        }
    }

    .goods_details_box {
        margin-top: 20rpx;
        background-color: #fFF;

        .content {
            padding: 20rpx 30rpx;
            font-size: 28rpx;
            color: #333;
            line-height: 180%;
        }

        image {
            width: 100%;
        }
    }

    .interval {
        height: 130rpx;
    }

    .buy_btn_box {
        background-color: #ffffff;
        //border-top: solid 2rpx #f7f7f7;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price {
            font-size: 24rpx;
            color: #333333;
            padding-left: 30rpx;

            text {
                font-size: 36rpx;
                color: #ff3d3d;
            }
        }

        button {
            width: 299rpx;
            height: 98rpx;
            background-color: $themeColor;
            font-size: 28rpx;
            color: #ffffff;
            line-height: 98rpx;
            border-radius: 0;
        }
    }

    .short_sale {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 28rpx;
        color: #FFF;
        background-color: #999;
    }

    .specification_popup_box {
        background-color: #FFF;
        border-radius: 20rpx 20rpx 0 0;
        position: relative;

        .close {
            position: absolute;
            top: 30rpx;
            right: 30rpx;
            @include bis("../../static/icon/ic_package_close.png");
            width: 40rpx;
            height: 40rpx;
        }

        .goods_info {
            padding: 30rpx;
            display: flex;
            align-items: center;

            image {
                width: 200rpx;
                height: 200rpx;
                border-radius: 10rpx;
                flex-shrink: 0;
                margin-right: 30rpx;
            }

            .info {
                .price {
                    font-size: 24rpx;
                    color: #ff3d3d;

                    text {
                        font-size: 36rpx;
                    }
                }

                .stock {
                    font-size: 24rpx;
                    color: #999999;
                    margin-top: 15rpx;
                }

                .specification_text {
                    font-size: 24rpx;
                    color: #333435;
                    margin-top: 15rpx;
                }
            }
        }

        scroll-view {
            max-height: 660rpx;

        }

        .scroll_content {
            padding: 0 30rpx 60rpx 30rpx;

            .specification_title {
                font-size: 28rpx;
                color: #333435;
                padding-top: 10rpx;
            }

            .specification_select_box {
                padding: 30rpx 0 10rpx 0;
                display: flex;
                flex-wrap: wrap;

                text {
                    height: 62rpx;
                    background-color: #f7f7f7;
                    border-radius: 8rpx;
                    line-height: 62rpx;
                    margin-bottom: 20rpx;
                    margin-right: 40rpx;
                    padding: 0 20rpx;

                    &.active {
                        background-color: $viceColor2;
                        border: solid 2rpx $themeColor;
                        color: $themeColor;

                    }
                }
            }

            .select_num_box {
                padding-top: 10rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .name {
                    font-size: 28rpx;
                    color: #333435;
                }

                .num_box {
                    display: flex;

                    button {
                        width: 60rpx;
                        height: 60rpx;
                        background-color: #f7f7f7;
                        line-height: 60rpx;
                        color: #cccccc;

                        &:first-child {
                            border-radius: 8rpx 0rpx 0rpx 8rpx;
                        }

                        &:last-child {
                            border-radius: 0rpx 8rpx 8rpx 0rpx;
                        }

                        &.active {
                            background-color: #e5e5e5;
                            color: #999999;
                        }
                    }

                    text {
                        width: 60rpx;
                        height: 60rpx;
                        background-color: #e5e5e5;
                        text-align: center;
                        line-height: 60rpx;
                        margin: 0 4rpx;
                        font-size: 30rpx;
                        color: #333;
                    }
                }
            }
        }

        .form_but {
            margin-top: 0rpx;
        }
    }
</style>
